<template>
  <div id="cesiumContainer1" />
</template>

<script setup >
import { onMounted } from "vue";
import * as Cesium from "cesium";

onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer1",{
     animation: false, // 动画控件
    shouldAnimate: false, // 初始时刻运动
    homeButton: false, // Home按钮
    fullscreenButton: false, // 全屏按钮
    baseLayerPicker: false, // 图层选择控件
    geocoder: false, // 地名查找控件
    timeline: false, // 时间线控件
    shadows: false,
    navigationHelpButton: false, // 帮助信息控件
    infoBox: false, // 点击要素之后显示的信息 信息框小部件
    requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]
    scene3DOnly: false, // 几何图形以3D模式绘制以节约GPU资源
    sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式  3d 球
    maximumRenderTimeChange:1,
    sceneModePicker: false, // 切换展示模式控件
    selectionIndicator: false,
     // 设置渲染
    orderIndependentTranslucency: false,
    contextOptions: {
        webgl: {
            alpha: true,
        },
    },
  });
(viewer.cesiumWidget.creditContainer).style.display = "none";

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),
})

const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
});
</script>

<style>
#cesiumContainer1 {
  width: 100%;
  height: 100%;
}
</style>
